<!--
 * @Description: 系统首页
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:02
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:01:06
-->
<template>
  <div>
    <div class="header" style="margin-top: 30px; display: flex; margin-left: 15px;" v-if="total.length > 0">
      <div style="flex: 1; height: 120px; background-color: #c0e326; border: 15px solid #c0e326; margin-right: 15px;">
        <div class="card">{{ total[0].type }}</div>
        <div class="number">{{ total[0].value }}&nbsp;个</div>
      </div>
      <div style="flex: 1; height: 120px; background-color: orange; border: 15px solid orange; margin-right: 15px;">
        <div class="card">{{ total[1].type }}</div>
        <div class="number">{{ total[1].value }}&nbsp;个</div>
      </div>
      <div style="flex: 1; height: 120px; background-color: pink; border: 15px solid pink; margin-right: 15px;">
        <div class="card">{{ total[2].type }}</div>
        <div class="number">{{ total[2].value }}&nbsp;个</div>
      </div>
      <div style="flex: 1; height: 120px; background-color: red; border: 15px solid red; margin-right: 15px;">
        <div class="card">{{ total[3].type }}</div>
        <div class="number">{{ total[3].value }}&nbsp;个</div>
      </div>
      <div style="flex: 1; height: 120px; background-color: purple; border: 15px solid purple;">
        <div class="card">{{ total[4].type }}</div>
        <div class="number">{{ total[4].value }}&nbsp;个</div>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div v-else class="header" style="margin-top: 30px; display: flex; margin-left: 15px;">
      <div v-for="n in 5" :key="n" style="flex: 1; height: 120px; background-color: #f0f0f0; border: 15px solid #f0f0f0; margin-right: 15px;">
        <div class="card">加载中...</div>
        <div class="number">0&nbsp;个</div>
      </div>
    </div>
    <div class="body" style="margin-top: 30px; display: flex; margin-left: 15px">
      <div class="left" style="margin-right: 15px; flex: 2;">
        <div class="map" style=" height: 400px; padding-left: 15px;">
          <Map></Map>
        </div>
      </div>
      <div class="right" style="display: flex; flex-direction: column; flex: 3;">
        <div class="top" style="display: flex;">
          <div class="h1" style=" height: 200px; margin-right: 15px;">
            <C221></C221>
          </div>
          <div class="h2" style=" height: 200px;">
            <C222></C222>
          </div>
        </div>
        <div class="bottom" style="margin-top: 20px;">
          <div class="h3" style=" height: 200px;">
            <C223></C223>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from '@/utils/request';
import C221 from './components/C221.vue';
import C222 from './components/C222.vue';
import C223 from './components/C223.vue';
import Map from './components/Map.vue';

export default {
  components: {
    C221,
    C222,
    C223,
    Map,
  },
  data() {
    return {
      total: [],
    };
  },
  methods: {
    async getTotal() {
    try {
      let res = await get('/count/countAll');
      this.total = res.data || [];
    } catch (error) {
      console.error('获取数据失败:', error);
      this.total = [];
    }
  },
},
  created() {
    this.getTotal();
  },
}
</script>

<style scoped>
.card {
  margin-top: 15px;
  font-size: 18px;
  color: white;
}

.number {
  margin-top: 30px;
  font-size: 15px;
  color: white;
  text-align: right;
}
</style>